<!DOCTYPE html>
<html>

<head>
    <title>营销中心</title>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_950377_g4e7evbmoq.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/flexible.js"></script>
    <style>
.newtit .r span{background:#148ceb;color:#fff;padding:0 .1rem;border-radius:2px}
.coupon_box{padding:.2rem}
.coupon_list{color:#fff}
.coupon_list a{color:#fff}
.coupon_list li{position:relative;padding:.2rem;background:linear-gradient(135deg,#35a2db,#73bdbb);border-radius:.1rem;margin-bottom:.2rem;overflow:hidden}
.coupon_list li.invalid{background:#c4c4c4}
.coupon_list li.invalid .a3 .right span{background:none;}
.coupon_list li.invalid::before{background: #babfc1;}
.coupon_list li::before{position:absolute;content:'满减券';text-align:center;font-size:.24rem;width:2rem;background:linear-gradient(135deg,#7983ff,#5f9de9);top:.4rem;right:-.6rem;transform:rotate(60deg)}
.coupon_list li .a1,.coupon_list li .a3{display:flex;justify-content:space-between;align-items:center}
.coupon_list li .a1 .left{font-size:.36rem;font-weight:700}
.coupon_list li .a1 .right{font-size:.24rem; padding-right: .6rem;}
.coupon_list li .a2{font-size:.2rem;color:#fff;position:relative;padding:.1rem}
.coupon_list li .a2 .left em{color:#fff}
.coupon_list li .a3{position:relative;line-height:.52rem;padding-top:.2rem;font-size:.24rem}
.coupon_list li .a3::before{position:absolute;content:'';width:.4rem;height:.4rem;background-color:#fff;border-radius:50%;left:-.4rem;top:-.2rem}
.coupon_list li .a3::after{position:absolute;content:'';width:.4rem;height:.4rem;background-color:#fff;border-radius:50%;right:-.4rem;top:-.2rem}
.coupon_list li .a3 .right span{padding:.1rem .15rem;color:#fff;border-radius:2px;font-size:.24rem;background-color:rgba(0,0,0,.5)}
    </style>
</head>

<body class="bgf9f9f9">
    <div class="nav">
        <div class="newtit">
          <div class="l"> <i class="iconfont icon-fanhui1" onClick="javascript:history.back(-1)"></i> <span data-title="|">优惠券列表</span>
          </div>
          <div class="r"><a href="coupon_add.html"> <span>新增</span></a> </div>
        </div>
      </div>
      <div class="tabbox">
          <ul class="tab">
              <li>
                  <a href="#" class="on">全部</a></li>
                  <li>  <a href="#">进行中</a></li>
                    <li>  <a href="#">已结束</a>
              </li>
          </ul>
      </div>
      <div class="coupon_box">
          <ul class="coupon_list">
                <a href="coupon_detail.html">
                        <li>
                            <div class="a1">
                                  <p class="left">满100减10</p>
                                  <p class="right">2018.12.7-2018.12.24</p>
                            </div>
                            <div class="a2 bdr-b">
                                  <p class="left">150张/<em>剩50张</em></p>
                                  <p class="right">周六、周日不可以用</p>
                            </div>
                            <div class="a3">
                                <p class="left">创建于2018.12.6</p>
                                <p class="right"><span>结束活动</span></p>
                            </div>
                        </li>
                      </a>
              <a href="#">
              <li class="invalid">
                  <div class="a1">
                        <p class="left">满100减10</p>
                        <p class="right">2018.12.7-2018.12.24</p>
                  </div>
                  <div class="a2 bdr-b">
                        <p class="left">150张/<em>剩50张</em></p>
                        <p class="right">周六、周日不可以用</p>
                  </div>
                  <div class="a3">
                      <p class="left">创建于2018.12.6</p>
                      <p class="right"><span>已经结束</span></p>
                  </div>
              </li>
            </a>
            <a href="#">
                    <li>
                        <div class="a1">
                              <p class="left">满100减10</p>
                              <p class="right">领取后5天内有效</p>
                        </div>
                        <div class="a2 bdr-b">
                              <p class="left">150张/<em>剩50张</em></p>
                              <p class="right">周六、周日不可以用</p>
                        </div>
                        <div class="a3">
                            <p class="left">创建于2018.12.6</p>
                            <p class="right"><span>结束活动</span></p>
                        </div>
                    </li>
                  </a>
          </ul>
          <div class="empty">
                <p><img src="images/coupon.png"></p>
                <p>您还没有添加任何优惠券~</p>
            </div>
      </div>
</body>
</html>